<template>
  <basic-container>
    <avue-crud v-model="form"
               :option="option"
               :data="data"
               ref="crud"
               @on-load="getList"
               @row-save="rowSave"
               @row-update="rowUpdate"
               @row-del="rowDel">
      <template #icon="scope">
        <i :class="scope.row.icon"
           style="font-size:24px"></i>
      </template>
      <!--      <template #menu="{row,size}">-->
      <!--        <el-button :size="size"-->
      <!--                   text-->
      <!--                   type="primary"-->
      <!--                   @click="handleAdd(row)">新增子级-->
      <!--        </el-button>-->
      <!--      </template>-->
    </avue-crud>
  </basic-container>
</template>
<script>
import {baseUrl} from "../../../config/env";
import {menuTree, saveMenu, updateMenu, deleteMenu} from '@/api/admin/menu.js'

export default {
  data() {
    return {
      parentId: undefined,
      form: {},
      data: [],
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        index: false,
        rowKey: 'id',
        rowParentKey: 'parentId',
        // defaultExpandAll:true,
        column: [
          {
            label: '菜单名称',
            prop: 'name',
            required: true
          },
          {
            label: '路径',
            prop: 'path',
            required: true
          },
          {
            label: "组件",
            prop: "component"
          },
          {
            label: "菜单类型",
            prop: "type",
            type: 'radio',
            required: true,
            dicUrl: baseUrl + "/system/sysDict/dict/MENU_TYPE",
            control: (val, form) => {
              if (val == '3') {
                // 当为按钮的时候
                return {
                  permission: {
                    display: true
                  },
                  name: {
                    label: "按钮名称"
                  },
                  path: {
                    display: false
                  }
                  , component: {
                    display: false
                  },
                  keepAlive: {
                    display: false
                  },
                  blank: {
                    display: false
                  }

                }
              } else if (val == '0' || val == '1') {
                // 左侧和顶部目录
                return {
                  permission: {
                    display: false
                  },
                  name: {
                    label: "菜单名称"
                  },
                  path: {
                    display: true
                  }
                  , component: {
                    display: false
                  },
                  keepAlive: {
                    display: false
                  },
                  blank: {
                    display: false
                  }
                }
              } else {
                return {
                  permission: {
                    display: false
                  },
                  name: {
                    label: "菜单名称"
                  },
                  path: {
                    display: true
                  }
                  , component: {
                    display: true
                  },
                  keepAlive: {
                    display: true
                  },
                  blank: {
                    display: true
                  }
                }
              }
            }
          },
          {
            label: '父菜单',
            prop: 'parentId',
            type: 'tree',
            hide: true,
            required: true,
            value: -1,
            dicUrl: baseUrl + '/system/sysMenu/tree',
            dicMethod: "post",
            props: {
              label: 'name',
              value: 'id'
            },
            dicFormatter: (res) => {
              console.log(res.data)
              let root = [
                {
                  id: -1,
                  name: '根菜单',
                  children: res.data
                }
              ]
              return root;
            }

          }, {
            label: "排序",
            prop: "sort",
            type: "number",
            value: '0'
          },
          {
            label: "是否保持活跃",
            prop: "keepAlive",
            type: 'radio',
            dicUrl: baseUrl + "/system/sysDict/dict/COMMON_FLAG"
          },

          {
            label: "是否外链",
            prop: "blank",
            type: 'radio',
            dicUrl: baseUrl + "/system/sysDict/dict/COMMON_FLAG"
          },
          {
            label: "权限",
            prop: "permission",
            display: false
          }

        ],
      }
    }
  },
  methods: {
    rowDel(row, index, done) {
      this.$confirm(`此操作将永久删除序号【${row.name}】的数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenu(row.id).then(res => {
          this.$message.success('删除成功')
          this.getList();

          done();
        });
      })
    },
    rowSave(row, done) {
      // row.parentId = this.parentId;
      // row.id = new Date().getTime()
      // this.parentId = undefined;
      // done(row)
      saveMenu(row).then(res => {
        this.$message.success('新增成功')
        this.getList();
        done()
      });
    },
    rowUpdate(row, index, done) {
      updateMenu(row).then(res => {
        this.$message.success('修改成功')
        this.getList();
        done()
      });
    },
    handleAdd(row) {

    },
    getList() {
      menuTree().then(res => {
        this.data = res.data.data
        console.log(res)
      });
    }
  }
}
</script>
